<template>
  <el-dialog v-model="visible" title="分配菜单" width="500">
    <el-tree
      v-loading="loading"
      ref="treeRef"
      :data="allMenu"
      show-checkbox
      default-expand-all
      :default-checked-keys="checkedMenu"
      node-key="id"
      highlight-current
      :props="defaultProps"
    />
    <!-- <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
    >
      全选
    </el-checkbox>
    <el-checkbox-group v-model="checkedMenu" @change="handleCheckedMenuChange">
      <el-checkbox
        v-for="(item, index) in allMenu"
        :key="index"
        :label="item.name"
        :value="item.id"
      >
        {{ item.name }}
      </el-checkbox>
    </el-checkbox-group> -->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import api from "@/api/auth.js";
import { toTree } from "@/utils/index.js";
// import { sortRoute } from "@/router/index.js";

const props = defineProps({
  typeName: { type: String, default: "新增" },
});
const emits = defineEmits(["success"]);
const visible = ref(false);
const loading = ref(false);
const defaultProps = {
  children: "children",
  label: "name",
};
// const filterMenu = (menuList, key) => {
//   const arr = JSON.parse(JSON.stringify(menuList));
//   return arr
//     .filter((item) => {
//       return item[key];
//     })
//     .map((item) => {
//       item = Object.assign({}, item);
//       if (item.children) {
//         item.children = filterMenu(item.children, key);
//       }
//       return item;
//     });
// };
// const filterRoutes = filterMenu(sortRoute, "title");
const treeRef = ref();
const form = ref();
// const checkAll = ref(false);
// const isIndeterminate = ref(false);
const checkedMenu = ref([]);
const allMenu = ref([]);

// const handleCheckAllChange = (val) => {
//   checkedMenu.value = val ? allMenu.value.map((ele) => ele.id) : [];
//   isIndeterminate.value = false;
// };
// const handleCheckedMenuChange = (value) => {
//   const checkedCount = value.length;
//   checkAll.value = checkedCount === allMenu.value.length;
//   isIndeterminate.value =
//     checkedCount > 0 && checkedCount < allMenu.value.length;
// };

const initData = async () => {
  loading.value = true;
  try {
    const allMenuRes = await api.listAllMenu();
    allMenu.value = toTree(allMenuRes.data);

    const res = await api.listRoleMenu({
      roleId: form.value.id,
    });
    checkedMenu.value = res.data;

    treeRef.value.setCheckedKeys(res.data, false);
  } finally {
    loading.value = false;
  }
  // isIndeterminate.value = false;
  // checkAll.value = checkedMenu.value.length === allMenu.value.length;
};
const submitForm = async () => {
  const keys = treeRef.value.getCheckedKeys(false);
  // console.log(keys);
  // if (keys.length) {
  const res = await api.assignRoleMenu({
    menuIds: keys,
    roleId: form.value.id,
  });
  if (res.data) {
    ElMessage.success(res.msg || `添加成功！`);
  } else {
    ElMessage.error(res.msg || `添加失败！`);
  }
  visible.value = false;
  emits("success");
  // } else {
  //   ElMessage.error(`请选择需要分配的菜单！`);
  // }
};

const onCancel = () => {
  visible.value = false;
};
const openDialog = (row) => {
  visible.value = true;
  checkedMenu.value = [];
  form.value = row ? JSON.parse(JSON.stringify(row)) : {};
  initData();
};

defineExpose({
  openDialog,
});
</script>
